<template>
  <div class="content">
    <el-form  size="small"  ref="ruleFormRef" :rules="rules" class="userInfoContent" :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="字典类型" prop="typeName">
        <el-input v-model="form.typeName"  autofocus/>
      </el-form-item>
      <el-form-item label="字典类型标识" prop="typeSign">
        <el-input v-model="form.typeSign"  />
      </el-form-item>
      <el-form-item label="显示排序" prop="sort">
        <el-input v-model="form.sort" type="number" min="0"/>
      </el-form-item>
      <el-form-item style="margin-top:40px;">
        <el-button  size="small"   plain icon="Edit"  style="margin-left:80px;border-color: white;margin-right:20px;" type="primary" @click="onSubmit(ruleFormRef)">保存</el-button>
        <el-button  size="small"  plain icon="Refresh"  style="color: darkgray;margin-right:20px;"  @click="resetForm(ruleFormRef)" >重置</el-button>
        <el-button  size="small"  plain type="info"  @click="close" >取消</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script lang="ts" setup>
import { reactive,ref, defineProps,toRefs,watchEffect,onMounted} from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import {info,edit,save} from '@/api/dicttype.ts'

const emit = defineEmits(['closeAddForm','success'])
const props = defineProps(['id','t'])
interface RuleForm {
  id:any,
  typeName:string,
  sort:string,
  typeSign:string,
}
const ruleFormRef = ref<FormInstance>()
const form = reactive<RuleForm>({
  id:null,
  typeName:'',
  sort:'0',
  typeSign:''
})

onMounted(()=>{
})

watchEffect(()=>{
  const t = props.t
  console.log("t",t,props.id)
  if(props.id){
    info(props.id).then((res)=>{
      if(res.code === 200){
        form.id=res.data.id
        form.typeName=res.data.typeName
        form.sort=res.data.sort
        form.typeSign=res.data.typeSign
      }
    })
  }
})

const rules = reactive<FormRules<RuleForm>>({
  typeName:[{required:true,message:'字典类型不能为空',trigger:'blur'}],
  typeSign:[{required:true,message:'字典类型标识不能为空',trigger:'blur'}],
  sort:[{required:true,message:'排序不能为空',trigger:'blur'}],
})


const onSubmit =  (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async(valid, fields) => {
    if (valid) {
      console.log('submit!')
      const code2 = ref();
      if(form.id != null){
        const {code} = await edit(form);
        code2.value=code
      }else{
        const {code} = await save(form);
        code2.value=code
      }
      if(code2.value === 200){
        ElMessage({
          type:'success',
          message:'保存成功'
        })
        resetForm(ruleFormRef.value)
        emit('success')
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  form.id=null
}
const close = ()=>{
  resetForm(ruleFormRef.value)
  emit('closeAddForm')
}
</script>

<style scoped>
.content{
  display: flex;
  justify-content: center;
  align-items: center;
}
.userInfoContent{
  /* background-color: red; */
}
</style>